<template>
	<view>
		<u-popup :show="show" round="24rpx" :safeAreaInsetBottom="false">
			<view class="popup-container">
				<view class="popup-content">
					<view class="popup-header">
						<view class="close-btn"></view>
						<view class="popup-title">
							<uni-text class="title">相似度</uni-text>
						</view>
						<image class="close-btn" src="/static/mine/icon_close.png" @click="$emit('close')" />
					</view>
					<image src="../static/common/icon_xsd.png" class="popup-image"></image>
					<view class="tips-list">
						<view class="tips-item">
							相似度是指照片与用户真人的相似程度， 高于70%才会判断为本人，相似度结果由AI自动识别， 结果仅供参考
						</view>
					</view>
					<view class="button-wrapper">
						<button class="save-button" @click="$emit('close')">我知道了</button>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name: "SimilarityPopup",
		data() {
			return {

			};
		},
		props: {
			show: {
				type: Boolean,
				default: false //是否显示
			},
		},
	}
</script>

<style lang="scss" scoped>
	.popup-container {
		background-color: #ffffff;
		border-radius: 24rpx 24rpx 0 0;
		padding: 40rpx 32rpx;
		text-align: center;

		.popup-header {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
		}

		.popup-image {
			margin: 80rpx 0;
			width: 160rpx;
			height: 160rpx;
		}

		.popup-title {
			text-align: center;
			flex: 1;

			.title {
				display: block;
				font-size: 28rpx;
				font-weight: bold;
				margin-bottom: 8rpx;
			}
		}
	}

	.tips-list {
		margin: 0 auto 62rpx;
		width: 628rpx;

		.tips-item {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			color: #9A9A9A;
			margin-top: 30rpx;

			.dot {
				width: 12rpx;
				height: 12rpx;
				border-radius: 50%;
				background: #F169F6;
				margin-right: 10rpx;
			}
		}
	}

	.close-btn {
		width: 28rpx;
		height: 28rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.save-button {
		width: 628rpx;
		height: 88rpx;
		font-weight: bold;
		font-size: 30rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 88rpx;
		background: linear-gradient(135deg, #FE93BF 0%, #A27AFF 100%);
		border-radius: 44rpx;

		&::after {
			border: none;
		}
	}
</style>